import React, { useState, useEffect, PureComponent, forwardRef, useContext, createContext, useReducer, memo, useCallback, useMemo, useRef, useImperativeHandle } from 'react'
export default function Test() {
  const [counter, setCounter] = useState(0)
  const sonRef = useRef()
  const addClick = () => {
    console.log(sonRef)
    setCounter(preCounter => preCounter + 1)
    sonRef.current.value = '函数式组件的ref转发' + counter
    sonRef.current.focus()
  }
  return (
    <>
      <div> 此时的值：{counter}</div>
      <Son ref={sonRef} />
      <hr />
      <button onClick={() => addClick()}>点击</button>
      <hr />
    </>
  )
}
const Son = forwardRef((props, ref) => {
  const inputRef = useRef()
  // 1.useImperativeHandle此函数返回的对象相当于绑定给上层传过来的ref
  useImperativeHandle(ref, () => ({
    focus: () => {
      console.log('ref的转发替换权限')
      console.log(inputRef.current)
      inputRef.current.value = 'coderwhy yyds'
    },
  }))
  return <input ref={inputRef} type='text' />
})
